<template>
    <MeModal title="选择职位类型" ref="jobSelectRef" width="820px">
      <n-tabs placement="left" style="max-height: 400px">
        <n-tab-pane v-for="l0 in jobs.level0" :name="l0.label" :tab="l0.label">
          <n-scrollbar>
            <n-flex>
              <n-button v-for="l1 in jobs.level1[l0.id]" @click="handleClickJob(l1)">{{ l1.label }}</n-button>
            </n-flex>
          </n-scrollbar>
        </n-tab-pane>
      </n-tabs>
  </MeModal>
</template>

<script setup>
import { jobs } from '@/data'
import { MeModal } from '@/components'
import { useModal } from '@/composables'
const props = defineProps({
  onClickJob: {
    type: Function,
    default: () => {},
  },
})


const [jobSelectRef] = useModal({})

function open() {
  jobSelectRef.value.open({
  //关闭取消和确认按钮
    showCancel: false,
    showOk: false
  })
}

//点击时调用父组件方法，传递出job_obj
function handleClickJob(job_obj) {
  props.onClickJob(job_obj)
  jobSelectRef.value.close()
}


// 暴露open
defineExpose({
  open,
})
</script>